"use client";
import { Card, List, Typography, Tag, Space } from "antd";
import { memo } from "react";
import "./index.css";

interface QuestionItem {
    id: number;
    title: string;
    difficulty: string;
    tags: string[];
    submitCount: number;
    passRate: number;
}

const mockData: QuestionItem[] = [
    {
        id: 1,
        title: "示例题目1",
        difficulty: "简单",
        tags: ["数组", "排序"],
        submitCount: 1000,
        passRate: 85
    },
    {
        id: 2,
        title: "示例题目2",
        difficulty: "中等",
        tags: ["字符串", "动态规划"],
        submitCount: 800,
        passRate: 65
    }
];

const getDifficultyColor = (difficulty: string) => {
    switch (difficulty) {
        case "简单":
            return "success";
        case "中等":
            return "warning";
        case "困难":
            return "error";
        default:
            return "default";
    }
};

const QuestionList: React.FC = () => {
    return (
        <div className="question-list">
            <List
                dataSource={mockData}
                renderItem={(item) => (
                    <List.Item>
                        <Card className="question-list-item">
                            <Typography.Text
                                className="question-list-title"
                                onClick={() =>
                                    window.open(`/question/${item.id}`)
                                }
                            >
                                {item.title}
                            </Typography.Text>
                            <div className="question-list-meta">
                                <Tag color={getDifficultyColor(item.difficulty)}>
                                    {item.difficulty}
                                </Tag>
                                <Space size={[0, 8]} wrap>
                                    {item.tags.map((tag, index) => (
                                        <Tag key={index} color="blue">
                                            {tag}
                                        </Tag>
                                    ))}
                                </Space>
                                <div className="question-list-stats">
                                    <span>提交次数: {item.submitCount}</span>
                                    <span>通过率: {item.passRate}%</span>
                                </div>
                            </div>
                        </Card>
                    </List.Item>
                )}
            />
        </div>
    );
};

export default memo(QuestionList);